<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/asd.css" rel="stylesheet" />
		<link href="../css/asdd.css" rel="stylesheet" />
		<style>
			.chart {
			height: 200px;
			margin: 0px;
			padding: 0px;
		}
		h5 {
			margin-top: 30px;
			font-weight: bold;
		}
		h5:first-child {
			margin-top: 15px;
		}
	</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<!-- 头部开始 -->
		<div>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">我的基金</h1>
				</header>
		</div>

		<div style="" class="jijin0">
			<div style="font-size: 20px;">
				海轩日日盈
			</div>
			<div style="margin-top: 45px;float: left;font-size: 20px;">昨日收益 （元）<div style="margin-top: 20px;font-size: 40px;"><a>+8.26</a></div>
			</div>
			<div style="margin-top: 45px;float:right;font-size: 20px;">总金额 （元) <div style="margin-top: 20px;font-size: 40px;"><a>50000</a></div>
			</div>
			<br />
			<div style="margin-left: 240px;margin-top: 120px;font-size: 15px;"><a href="http://www.baidu.com">查看详细</>
			</div>
		</div>

		<div class="jijin1">
			<div style="margin: 0 auto;float:left;line-height: 90px;width: 30%;text-align: center;margin-top: 15px;">
				<h6 style="font-size: 18px;">万份收益</h6>
				<h6 style="font-size: 18px;">2.06</h6>
			</div>
			<div style="margin: 0 auto;float:left;line-height: 90px;width: 40%;border-left: solid 1px #b3b3b3;border-right: solid 1px #b3b3b3;margin-top: 15px;text-align: center;">
				<h6 style="font-size: 18px;">累计收益</h6>
				<h6 style="font-size: 18px;">248.2</h6>
			</div>
			<div style="margin: 0 auto;float:left;line-height: 90px;width: 30%;text-align: center;margin-top: 15px">
				<h6 style="font-size: 18px;">剩余收益</h6>
				<h6 style="font-size: 18px;">248.2</h6>
			</div>
		</div>

		<div>
			<div style="" class="jijin2">
				<div style="width: 90%;margin: 0 auto; border-bottom: solid 1px #b3b3b3;height: 39px;">
					<a style="margin-left: 0px;">近期七日年化收益率 6.88%</a>
					<a href="#"><span class="mui-icon mui-icon-arrowright" style="float: right;margin-top: 8px;margin-right: -5px;"></span></a>
					

				</div>
			</div>

			<div style="" class="jijin3">
				<div class="mui-content-padded">

					<div class="chart" id="lineChart"></div>
				</div>
				<button type="button" class="mui-btn mui-btn-outlined" style="border-radius: 10px;float: left;margin-left: 20px;width: 130px;">
					加购
				</button>
				<button type="button" class="mui-btn mui-btn-outlined" style="border-radius: 10px;float: right;margin-right: 20px;width: 130px;">
					取现
				</button>
			</div>
		</div>

		<script src="../libs/echarts-all.js"></script>
		<script>
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
					// series: [{
					// 	name: '访问来源',
					// 	type: 'pie',
					// 	radius: '65%',
					// 	center: ['50%', '50%'],
					// 	data: [{
					// 		value: 335,
					// 		name: '待补充'
					// 	}, {
					// 		value: 310,
					// 		name: '待补充'
					// 	}, {
					// 		value: 234,
					// 		name: '待补充'
					// 	}, {
					// 		value: 135,
					// 		name: '待补充'
					// 	}, {
					// 		value: 1548,
					// 		name: '待补充'
					// 	}]
					// }]
				} : {
					// legend: {
					// 	data: ['蒸发量', '降水量']
					// },
					grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 25
					},
					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}],
					yAxis: [{
						type: 'value',
						splitArea: {
							show: true
						}
					}],
					series: [{
						name: '蒸发量',
						type: chartType,
						data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
					}, {
						name: '降水量',
						type: chartType,
						data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
					}]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			/* var barChart = echarts.init(byId('barChart'));
			barChart.setOption(getOption('bar')); */
			var lineChart = echarts.init(byId('lineChart'));
			lineChart.setOption(getOption('line'));
			// var pieChart = echarts.init(byId('pieChart'));
			// pieChart.setOption(getOption('pie'));
			/* byId("echarts").addEventListener('tap',function(){
				var url = this.getAttribute('data-url');
				plus.runtime.openURL(url);
			},false); */
		</script>
	</body>
</html>
